<template>
  <view>
    <singleHeader :pageTitle="pageTitle"></singleHeader>

    <view class="m-login-hd">
      <slot name="header"></slot>
    </view>
    <view class="m-login-fd">
      <view :class="['btn', disabled ? '' : 'on']" @click="submit">{{
        btnText
      }}</view>

      <view class="link" v-if="hasLink">
        <view @click="$utils.toUrl('/login/login/register')">账户注册</view>
        <view class="line"></view>
        <view @click="$emit('changeType', type ? 0 : 1)">{{
          !type ? "短信验证码登录" : "账号密码登录"
        }}</view>
        <view class="line"></view>
        <view @click="$utils.toUrl('/login/login/forgetPassword')">忘记密码</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    type: {
      type: Number,
      default: 0
    },
    pageTitle: {
      type: String,
      default: ""
    },
    btnText: {
      type: String,
      default: "确认"
    },
    hasLink: {
      type: Boolean,
      default: false
    },

    disabled: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      placeholderStyle: "color:#8c8c8c;",
      checked: false
    };
  },

  methods: {
    submit() {
      if (this.disabled) return;
      this.$u.throttle(() => {
        this.$emit("submit");
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
.m-login-hd {
  margin: 180rpx 30rpx 0;
  border-bottom: 1px solid #efefef;
}

.m-login-fd {
  padding: 80rpx 76rpx 0;

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88rpx;
    background: #f0250e;
    font-size: 32rpx;
    color: #fff;
    border-radius: 32px;
    opacity: 0.2;

    &.on {
      opacity: 1;
    }
  }

  .link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 40rpx;
    color: #8c8c8c;
    font-size: 28rpx;

    .line {
      margin: 0 24rpx;
      width: 2rpx;
      height: 20rpx;
      background: #f2f2f2;
    }
  }
}
</style>
